import React from 'react'
import store from '../store/store'
import { getSongerPlaysLists, getSongUrl, getSongLyric } from '../api/index'
import back from '../assets/images/toBack.png'

require('./songerPlaylists/songerPlaylists.css')
class SongerPlaylists extends React.Component {
    constructor(props) {
        super(props)
        console.log(props)
        this.state = {
            //从歌手榜获取歌单的id,图片,歌手名
            songerPlayId: props.location.state.id,
            coverImgUrl: props.location.state.picUrl,
            songName: props.location.state.name,
            songerPlaylists: [],
            songUrl: "",
            songId: "",
            lyric:[]
        }
    }
    //点击每首歌获取id
    handleGin(id, ar, picUrl, name) {
        this.getSongLy(id)
        this.getSongUrlLocal(id)
        store.dispatch({
            type: 'GET_SONGIMG',
            payload: { songImg: picUrl }
        })
        store.dispatch({
            type: 'GET_SONGTitle',
            payload: { songTitle: name }
        })
        store.dispatch({
            type: 'GET_SONGERNAME',
            payload: { songArits: ar }
        })
        store.dispatch({
            type: 'GET_SONGID',
            payload: { songId: id }
        })
    }
    //通过歌曲id获取歌词
    getSongLy(id) {
        console.log(id)
        getSongLyric(id).then((res) => {
            console.log(res)
            store.dispatch({
                type: 'GET_LYRIC',
                payload: { lyric: res.data.lrc.lyric }
            })
        })
    }
    //请求音乐Url
    getSongUrlLocal(id) {
        getSongUrl(id).then((res) => {
            store.dispatch({
                type: 'GET_SONGURL',
                payload: { songUrl: res.data.data[0].url }
            })
        })
    }
    //用id获取歌手榜歌单每首歌曲
    getSongerPlayers(songerPlayId) {
        getSongerPlaysLists(songerPlayId).then((res) => {
            this.setState({
                songerPlaylists: res.data.hotSongs
            })
        })
    }
    componentWillMount() {
        //调用获取歌手榜每首歌曲函数传入id
        this.getSongerPlayers(this.state.songerPlayId)
    }
    render() {
        const { coverImgUrl, songName, songerPlaylists,lyric } = this.state
        console.log(lyric)
        // console.log(songerPlaylists)
        let songPlaylis = songerPlaylists.map(({ id, name, ar, al }, index) => {
            return (
                <li className="songerPlayIng" key={id} onClick={this.handleGin.bind(this, id, ar[0].name, al.picUrl, name)}>

                    <img src={al.picUrl} alt="" className="songPlayImg" />
                    <span className="songPlayTitle">{name}</span>
                </li>
            )
        })
        return (
            <div>
                <div className="recommendPlayList" style={{ width: "100%", height: "260px", background: ' url(' + coverImgUrl + ') center center / 100% 306px no-repeat' }}>
                    <div className="back" onClick={() => {
                        this.props.history.go(-1)
                    }}>
                        <img src={back} alt="" className="icon-back" />
                    </div>
                    <p className="songName">{songName}</p>
                </div>
                {/* 渲染每首歌曲 */}
                <ul className="songPlayShow">
                    {songPlaylis}
                </ul>
            </div>
        )
    }
}

export default SongerPlaylists